import { Button, message } from 'antd';

import safeImg from '@/assets/images/safe.png';
import BaseDiv from '@/components/baseDiv';

import styles from './index.less';

const baseStyles1: React.CSSProperties = {
  height: 465,
  background: '#040334',
  opacity: 1,
};
export interface Props {
  dataSource: string[];
  title: string;
}
export function Safe(props: Props) {
  return (
    <BaseDiv baseStyles={baseStyles1} boxStyles={{ display: 'flex' }}>
      <div className={styles.content}>
        <div className={styles.head}>{props.title}</div>
        {props.dataSource &&
          props.dataSource.map((item) => {
            return (
              <div key={Math.random()} className={styles.title}>
                <div className={styles.dot} />
                {item}
              </div>
            );
          })}
        <div style={{ height: 200, display: 'flex', alignItems: 'center' }}>
          <Button onClick={() => { message.info('暂无此功能');}} className={styles.button}>咨询方案</Button>
        </div>
      </div>
      <div className={styles.img}>
        <img src={safeImg} style={{ width: '100%', height: '100%' }} />
      </div>
    </BaseDiv>
  );
}
